<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center xgover_flex_0_higd"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub xgover_fd0_0_higd'>
					<view class='flex flex-wrap align-center xgover_fd0_0_c0_higd' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  xgover_fd0_0_c0_c0_higd'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='xgover_fd0_0_c1_c0_higd'>{{title}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end xgover_fd0_0_c0_higd'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<benben-popup v-model="popupShow1748333214590" :mask="true" :mask-close-able="false" mode='center'>
				<!---flex布局flex布局开始-->
				<view class="flex flex-direction flex-wrap align-start benben-flex-layout xgover_flex_1_higd">
					<view class='flex flex-direction flex-wrap align-stretch xgover_fd1_0_higd'>
						<view class='flex flex-wrap align-center justify-center xgover_fd1_0_c0_higd'>
							<image class='xgover_fd1_0_c0_c0_higd' mode="aspectFit" :src='STATIC_URL+"138.png"'></image>
						</view>
						<view class='flex flex-wrap align-center justify-center xgover_fd1_0_c1_higd'>
							<text class='xgover_fd1_0_c1_c0_higd'>{{$t('提交成功')}}</text>
						</view>
						<view class='flex flex-wrap align-center justify-around xgover_fd1_0_c2_higd'>
							<button class='xgover_fd1_0_c2_c0_higd'>{{$t('返回')}}</button>
							<!-- <button class='xgover_fd1_0_c2_c1_higd'   >{{$t('下一项')}}</button>
 -->
						</view>
					</view>
					<!-- <image class='xgover_fd1_1_higd'  mode="aspectFit"  :src='STATIC_URL+"78.png"' @tap.stop="popupShow1748333214590=false" ></image>
 -->
				</view>

				<!---flex布局flex布局结束-->

			</benben-popup>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout xgover_flex_2_higd">
				<view class='flex flex-direction align-stretch xgover_fd2_0_higd'>
					<view class='flex flex-wrap align-center xgover_fd2_0_c0_higd'>
						<text class='xgover_fd2_0_c0_c0_higd'>{{$t('巡更位置')}}</text>
						<text>{{info.xgdgl_xgdmc}}</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='xgover_fd2_0_c0_c0_higd'>{{$t('所在区域')}}</text>
						<text>{{info.address}}</text>
					</view>
				</view>
				<view class='flex flex-wrap align-center xgover_fd2_1_higd'>
				</view>
				<view class='flex flex-direction align-stretch xgover_fd2_2_higd'>
					<view class='flex flex-wrap align-center'>
						<text class='xgover_fd2_2_c0_c0_higd'>{{$t('问题描述')}}</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='xgover_fd2_0_c0_higd'>{{info.wtms?info.wtms:'无'}}</text>
					</view>
					<view class='flex flex-direction align-stretch xgover_fd2_2_c2_higd'>
						<template v-if=" info.wttp.length!=0">
							<view class='flex flex-wrap align-center yhpcdetail_fd2_4_higd' 
								>
								<image v-for='(item,key0) in info.wttp' :key='key0'  @tap.stop="multiImagePreview(item,info.wttp,'')" class='yhpcdetail_fd2_4_c0_higd' mode="aspectFill" :src='item'></image>
							</view>
						</template>
						<!-- <template v-for='(item,key0) in info.wttp'>
							<view class='flex flex-direction align-start xgover_fd2_0_c0_higd' :key='key0'>
								<benben-images-upload ref="benbenImagesUploadfd2_2_c2_c0_c0" :img-list.sync="file"
									:img-ids.sync="fileid" :maxlength="9" v-if="video==''">
									<template #content="{ num, maxlength, isShow}">
										<view class='flex flex-wrap align-start flex xgover_fd2_2_c2_c0_c0_higd'>

											<view v-for="(image, index) in file" :key="index"
												class='flex position-relative xgover_fd2_2_c2_c0_c00_higd'>
												<benben-clean-icon
													class='fu-iconfont2 position-absolute xgover_fd2_2_c2_c0_c000_higd'
													hand-name="benben-images-upload" hand-method="delImage"
													:hand-index="index">&#xE8E7;</benben-clean-icon>
												<benben-image-item class='xgover_fd2_2_c2_c0_c001_higd'
													mode="aspectFill" hand-name="benben-images-upload"
													hand-method="previewImage" :hand-index="index" :src='image'>
												</benben-image-item>
											</view>


											<benben-image-item class='xgover_fd2_2_c2_c0_c01_higd' mode="aspectFit"
												hand-name="benben-images-upload" hand-method="manyChooseImage"
												v-if="isShow" :src='STATIC_URL+"76.jpg"'></benben-image-item>

										</view>
									</template>
								</benben-images-upload>
							</view>
						</template> -->

						<template v-for='(item,key0) in info.wtsp'>
							<view class='flex flex-wrap align-center' v-if=" info.wtsp.length!=0" :key='key0'>

								<!-- <video class='flex  xgover_fd2_2_c2_c1_c0_higd' :poster="item.tumb" :src="item.path"
									controls='true' x5-video-player-type="h5" :enable-progress-gesture='true'
									object-fit="fill"></video> -->
									<view class="xgover_fd2_2_c2_c1_c0_higd" style="position: relative;"  @tap.stop="mixinToPlayVideo(item.path)">
										<image class='flex  xgover_fd2_2_c2_c1_c0_higd' :src="item.thumb" mode="aspectFill"></image>
										<image style="position: absolute;width: 88rpx;height: 88rpx;left: 50%;top: 50%;margin-top: -44rpx;margin-left: -44rpx;z-index:9;"  :src='STATIC_URL+"247.png"' mode=""></image>
									</view>

							</view>
						</template>

					</view>
				</view>
				<view class='flex flex-direction align-stretch xgover_fd2_3_higd'>
					<view class='flex flex-wrap align-center'>
						<text class='xgover_fd2_2_c0_c0_higd'>{{$t('是否异常')}}</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='xgover_fd2_3_c1_c0_higd' v-if=" info.xgjg=='1'">{{$t('否')}}</text><text
							class='xgover_fd2_3_c1_c0_higd' v-if=" info.xgjg=='2'">{{$t('是')}}</text>
					</view>
				</view>
				<!--     <view   class='flex flex-wrap align-center justify-center xgover_fd2_4_higd'      >
        <button class='xgover_fd2_4_c0_higd'   >{{$t('下一项')}}</button>
</view>
 -->
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"popupShow1748333214590": false,
				"video": "",
				"videos": {},
				"file": [],
				/** zgyj【意见】 **/ "zgyj": "",
				"fileid": "",
				"isswich": 1,
				/** qyxx_id【区域管理ID】
				 *   ldxx_id【楼栋信息ID】
				 *   xqwzxx_id【校区位置信息ID】
				 *   wttp【问题图片】
				 *   wtms【问题描述】
				 *   xqwzxx_wzmc【校区位置】
				 *   xgdgl_xgdmc【巡更点】
				 *   aid【巡更问题ID】 **/
				"info": {
					"aid": "",
					"xgdgl_xgdmc": "",
					"xqwzxx_wzmc": "",
					"wtms": "",
					"wttp": [],
					"wtsp": [],
					"xqwzxx_id": "",
					"ldxx_id": "",
					"qyxx_id": "",
					"xglogxq_id": "",
					"xgjg": "",
					"address": ""
				},
				"id": "2",
				"title": ""
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				title
			} = options
			if (id !== undefined) this.id = id
			if (title !== undefined) this.title = title
			this.getgy847de54886b3Func()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//查询巡更详情-已完成
			async getgy847de54886b3Func() {
				//请求方法
				//数据验证

				let datainfo = await this.$api.get(global.apiUrls.post6847de54886b3, {
					aid: this.id
				});

				if (datainfo.data.code != 1) {
					this.$message.info(datainfo.data.msg);
					return
				}
				let infoinfo = datainfo.data;
				this.info = infoinfo.data

			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;

		.xgover_flex_2_higd {
			margin: 16rpx 0rpx 0rpx 0rpx;

			.xgover_fd2_0_higd {
				padding: 28rpx 32rpx 28rpx 32rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				font-weight: 500;
			}

			.xgover_fd2_1_higd {
				height: 16rpx;
			}

			.xgover_fd2_2_higd {
				padding: 24rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
				border-radius: 16rpx;
				margin: 0rpx 0rpx 0rpx 0rpx;

				.xgover_fd2_2_c2_higd {
					line-height: 66rpx;

					.xgover_fd2_2_c2_c1_c0_higd {
						width: 100%;
						height: 300rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
					}
				}
				.yhpcdetail_fd2_4_higd {
								margin: 0rpx 0 32rpx 0rpx;
				
								.yhpcdetail_fd2_4_c0_higd {
									width: 156rpx;
									height: 156rpx;
									border-radius: 8rpx;
									margin: 0rpx 16rpx 16rpx 0rpx;
								}
							}
			}

			.xgover_fd2_3_higd {
				padding: 32rpx;
				background: rgba(255, 255, 255, 1);
				background-size: 100% auto;
			}

			.xgover_fd2_4_higd {
				margin: 0rpx 0rpx 68rpx 0rpx;

				.xgover_fd2_4_c0_higd {
					border-radius: 44rpx;
					width: 90%;
					line-height: 88rpx;
					font-size: 24rpx;
					background: rgba(252, 1, 1, 1);
					color: #fff;
					height: 88rpx;
				}
			}
		}

		.xgover_fd2_0_c0_higd {
			margin: 0rpx 0rpx 24rpx 0rpx;
		}

		.xgover_fd2_0_c0_c0_higd {
			width: 140rpx;
		}

		.xgover_fd2_2_c0_c0_higd {
			color: #333;
			font-size: 32rpx;
			margin: 0rpx 0rpx 24rpx 0rpx;
			font-weight: 500;
		}

		.xgover_fd2_2_c2_c0_c0_higd {
			width: 100%;
			padding: 24rpx 0rpx 0rpx 24rpx;

			.xgover_fd2_2_c2_c0_c00_higd {
				margin: 0rpx 24rpx 24rpx 0rpx;

				.xgover_fd2_2_c2_c0_c000_higd {
					top: 0rpx;
					right: 0rpx;
					z-index: 10;
					color: #ff5536;
				}

				.xgover_fd2_2_c2_c0_c001_higd {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
				}
			}

			.xgover_fd2_2_c2_c0_c01_higd {
				width: 160rpx;
				height: 160rpx;
				margin: 0rpx 24rpx 24rpx 0rpx;
				border-radius: 16rpx;
			}
		}

		.xgover_fd2_3_c1_c0_higd {
			color: #333;
		}

		.xgover_flex_1_higd {
			width: 510rpx;

			.xgover_fd1_0_higd {
				background: #fff;
				background-size: 100% auto !important;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 40rpx 0rpx 0rpx 0rpx;
				width: 510rpx;

				.xgover_fd1_0_c0_higd {
					margin: 32rpx 176rpx 32rpx 176rpx;

					.xgover_fd1_0_c0_c0_higd {
						width: 140rpx;
						height: 140rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}

				.xgover_fd1_0_c1_higd {
					margin: 0rpx 0rpx 0rpx 0rpx;

					.xgover_fd1_0_c1_c0_higd {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}
				}

				.xgover_fd1_0_c2_higd {
					padding: 0rpx 0rpx 45rpx 0rpx;

					.xgover_fd1_0_c2_c0_higd {
						border-radius: 33rpx 33rpx 33rpx 33rpx;
						width: 40%;
						line-height: 60rpx;
						font-size: 24rpx;
						background: rgba(255, 241, 240, 1);
						color: rgba(211, 42, 41, 1);
					}

					.xgover_fd1_0_c2_c1_higd {
						border-radius: 33rpx 33rpx 33rpx 33rpx;
						width: 40%;
						line-height: 60rpx;
						font-size: 24rpx;
						background: rgba(211, 42, 41, 1);
						color: #fff;
					}
				}
			}

			.xgover_fd1_1_higd {
				width: 60rpx;
				height: 60rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin: 48rpx 0rpx 0rpx 241rpx;
			}
		}

		.xgover_flex_0_higd {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.xgover_fd0_0_higd {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.xgover_fd0_0_c1_c0_higd {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.xgover_fd0_0_c0_higd {
			width: 120rpx;

			.xgover_fd0_0_c0_c0_higd {
				font-size: 36rpx;
				color: #333;
			}
		}
	}
</style>
